<template>
  <div>
    <Table :columns="columns" :data="data" :loading="loadTable" border style="width:800px; margin: 0 auto;text-align:center;"></Table>
  </div>
</template>
<script>
import md5 from 'js-md5';
import querystring from 'querystring';
import { HOST } from '../../libs/config.js';
import {loginInvalid} from "../../libs/loginInvalidNotice.js";
export default {
  props: {

  },
  data() {
    return {
      curIndex: -1,
      modalIsOn: false,
      loading: true,
      loadTable: true,
      newPassword: '',
      columns:[
        {
          title: '姓名',
          key: 'username',
          width: 400,
          align: 'center'
        },
        {
          title: '更改密码',
          key: 'passwordChange',
          width: 400,
          align: 'center',
          render:(h, params) => {
            return h('Button', {
              props: {
                type: 'primary',
                icon: 'edit'
              },
              nativeOn: {
                click: () => {
                  this.handleUpdatePassword(params.index);
                }
              }
            }, '修改密码')
          }
        }
      ],
      data: [

      ]
    }
  },
  methods: {
    handleUpdatePassword(index) {
      this.curIndex = index;
      this.handleModal();
    },
    handleSavePassword() {
      this.$axios.post(HOST + '/user/updatePw',
        querystring.stringify({
          id: this.data[this.curIndex].uid,
          'new_password': md5(this.newPassword + 'gongxun')
        }), {
          withCredentials: true
        }
      )
      .then((response) => {
        this.newPassword = '';
        this.$Modal.remove();
        if (response.data.status === 'success') {
          this.$Notice.success({
            title: '更改成功',
            desc: `用户${this.data[this.curIndex].username}，密码更新成功`
          });
        } else{
          this.$Notice.error({
            title: '更改失败',
            desc: `用户${this.data[this.curIndex].username}，密码更新失败`
          });
        } 
      })
      .catch((err) => {
        if (err.data.status === 'invalid Token') {
          loginInvalid(this)();
        }
      })
    },
    handlecancel() {
      this.newPassword = '';
      this.loading = false;
    },
    handleModal() {
      this.$Modal.confirm({
        render: (h) => {
          return h('Input', {
            props: {
              value: this.newPassword,
              autofocus: true,
              placeholder: '请输入新密码'
            },
            on: {
              input: (val) => {
                this.newPassword = val;
              }
            }
          })
        },
        loading: true,
        title: '修改密码',
        onOk: () => {
          this.handleSavePassword();
        },
        onCancel: () => {
          this.$Modal.remove();
        }
      })
    }
  },
  mounted() {
    this.$axios.get(HOST + '/user/list', {
      withCredentials: true
    })
    .then((response) => {
      let data = response.data;
      if (data.length > 0) {
        this.data = data;
        this.loadTable = false;
      }
    })
    .catch((err) => {
      if (err.data.status === 'invalid Token') {
        loginInvalid(this)();
      }
    })
  }
}
</script>
